<script >
import {userUpdatePwdService, userLogOutService} from "@/api/user/UserService";
import {removeToken} from "@/utils/auth";
export default {
    data() {
        return {
            userInfo: [],
            rules: {
                oldPassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                    { validator: this.validatePass, trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { validator: this.validatePass, trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: this.validateConfirmPassword, trigger: 'blur' }
                ],
            },
            form: {
                oldPassword: "",
                newPassword: "",
                confirmPassword: "",
            }
        }
    },
    methods: {
        // 封装时间返回对象
        getFormatDate(time) {
            const date = new Date(time);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        validatePass(rule, value, callback) {
            if(/^(?=.*\d)(?=.*[A-z])[\da-zA-Z]{6,18}$/.test(value) === false) {
                callback(new Error('长度在 6 到 18 个字符且由数字和字母组成'));
            } else {
                callback();
            }
        },
        validateConfirmPassword(rule, value, callback) {
            if(/^(?=.*\d)(?=.*[A-z])[\da-zA-Z]{6,18}$/.test(value) === false) {
                callback(new Error('长度在 6 到 18 个字符且由数字和字母组成'));
            } else {
                if (value !== this.form.newPassword) {
                    callback(new Error('两次密码不一致'));
                } else {
                    callback();
                }
            }
        },
        async UpdatePass() {
            let result = await userUpdatePwdService(this.form);
            if(result.code === 200) {
                this.$message.success("修改密码成功,身份即将失效,请重新登录");
                let response = await userLogOutService();
                if(response.code === 200) {
                    // 清除token
                    removeToken();
                    await this.$router.push("/login");
                }
            } else {
                this.$message.error(result.message);
            }
        }
    },
    created() {
        this.userInfo = JSON.parse(JSON.stringify(this.$store.getters.userInfo));
    }
}
</script>

<template>
    <div class="UserModel">
        <div class="u_top">
            <div>修改密码</div>
        </div>
        <div class="u_body">
            <el-form :rules="rules" label-position="left" ref="form" :model="form" label-width="80px">
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model="form.oldPassword" type="password" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password" placeholder="请输入确认密码"></el-input>
                </el-form-item>
                <el-form-item style="display: flex;justify-content: center; align-items: center;gap: 30px">
                    <el-button type="primary" @click="UpdatePass">提交修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped lang="scss">
.UserModel {
    width: 72%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 7px 3px rgb(212 206 206);
    background-color: #fff;
    .u_top {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 5px 5px 10px;
        font-weight: 800;
        div {
            font-size: 18px;
        }
        .el-button {
            font-weight: 800;
            transition: all .5s ease;
            color: #a4c1fa;
            transform: scale(0.88);
            background-color: rgba(238, 245, 254,0.99);
        }
        .el-button:hover {
            color: #fff;
            background-color: rgba(100, 156, 248);
        }
    }
    .u_body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-form {
            display: flex;
            flex-direction: column;
            .el-form-item:nth-last-child(1) {
                position: relative;
                .el-button {
                    position: relative;
                    left: -15px;
                }
            }
        }
    }
}
</style>
